<template>
  <div class="login-wrapper">
    <div class="login-box">
      <div class="header" id="loginIndexHeaderId">
        <span class="title">国泰网信</span>
        <span class="quit" @click="clickHide">
          <el-icon>
            <Close />
          </el-icon>
        </span>
      </div>
      <el-form
        size="large"
        class="login-content-form"
        :model="formData"
        :rules="rules"
        ref="formRef"
        label-width="0px"
      >
        <el-form-item prop="username" class="username-box">
          <span class="user-icon">
            <el-icon color="#8893a1">
              <User />
            </el-icon>
          </span>
          <el-input
            type="text"
            placeholder="请输入 admin"
            v-model.trim="formData.username"
            clearable
            autocomplete="off"
            @keyup.enter.native="clickLogin"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="password" class="password-box">
          <span class="password-icon">
            <el-icon color="#8893a1">
              <Lock />
            </el-icon>
          </span>
          <el-input
            :type="isShowPassword ? 'text' : 'password'"
            placeholder="密码"
            v-model.trim="formData.password"
            autocomplete="off"
            @keyup.enter.native="clickLogin"
          >
          </el-input>
          <div class="view-icon" @click="isShowPassword = !isShowPassword">
            <el-icon v-if="isShowPassword" color="#8893a1">
              <View />
            </el-icon>
            <el-icon v-else color="#8893a1">
              <Hide />
            </el-icon>
          </div>
        </el-form-item>
        <el-form-item class="login-btn-wrapper">
          <el-button type="primary" class="login-content-submit" @click="clickLogin">
            <span>登录</span>
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { View, Hide, Close, User, Lock } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import renderDrag from '@/utils/drag.js'
onMounted(() => {
  renderDrag('loginIndexHeaderId')
  localStorage.removeItem('ACCESS_TOKEN')
})
const router = useRouter()
const formData = ref({
  username: '',
  password: ''
})
const rules = ref({
  username: [
    {
      required: true,
      message: '请输入用户名',
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur'
    }
  ]
})
const formRef = ref()
const isShowPassword = ref(false)
const clickLogin = () => {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      console.log('登录成功')
      const { username, password } = formData.value
      console.log(window)
      //   setElectronStore.setItem('ACCESS_TOKEN', '123456')
      localStorage.setItem('ACCESS_TOKEN', '123456')
      window.api.apiIsLogin(true)
      router.push({ path: '/home' })
      setTimeout(() => {}, 600)
      // getLoginApi({ username, password })
      //     .then((res) => {
      //         if (res.code == 200) {
      //             const { userInfo, token } = res.data;
      //             const { roleList, currentRole } = userInfo;
      //             localStorage.setItem("ACCESS_TOKEN", token);
      //             userStoreData.setRoles(roleList);
      //             userStoreData.setCurrentRole(currentRole);
      //             localStorage.setItem("CURRENT_ROLE", currentRole);
      //             permissionStoreData.getMenus(currentRole).then(() => {
      //                 setTimeout(() => {
      //                     router.push({ path: "/" });
      //                 }, 500);
      //             });
      //         } else {
      //             ElMessage.error("用户名错误");
      //         }
      //     })
      //     .catch(() => {});
    }
  })
}
const clickHide = () => {
  console.log('点击了关闭')
  window.api.apiWindowClose(false)
}
</script>

<style lang="scss" scoped>
.login-box {
  width: 320px;
  height: 324px;
  padding: 0 15px 0 15px;
  border-radius: 5px;
  box-sizing: border-box;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  .login-content-submit {
    width: 100%;
  }
  .el-form-item {
    margin-bottom: 42px;
  }
}
.header {
  display: flex;
  justify-content: space-between;
  padding-top: 15px;
  margin-bottom: 40px;
  /* -webkit-app-region: drag; */
  .title {
    letter-spacing: 1px;
    font-weight: 500;
    font-size: 16px;
    color: #2d82ed;
  }
  .quit:hover {
    cursor: pointer;
  }
}
.el-form-item.is-error .el-input__wrapper {
  /* box-shadow: none; */
  /* border-bottom: 1px solid red; */
}
:deep(.el-input__wrapper) {
  box-shadow: none;
  border-radius: 0;
  border-bottom: 1px solid #eee;
  &:hover {
    box-shadow: none;
  }
  &.is-focus {
    box-shadow: none;
    border-bottom: 1px solid #eee;
  }
}
.username-box {
  position: relative;
  .user-icon {
    position: absolute;
    left: 10px;
    z-index: 9;
  }
  :deep(.el-input__wrapper) {
    padding-left: 35px;
  }
}
.password-box {
  position: relative;
  .password-icon {
    position: absolute;
    left: 10px;
    z-index: 9;
  }
  .view-icon {
    width: 20px;
    position: absolute;
    top: 0;
    right: 0;
  }
  :deep(.el-input__inner) {
    padding: 0 20px;
  }
}
</style>
<style lang="scss">
.login-btn-wrapper {
  .el-form-item__content {
    /* margin-left: 10px !important; */
  }
}
</style>
